import React, {
  useState,
  useRef,
  useEffect,
  memo,
  useLayoutEffect,
} from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import {
  Card,
  Alert,
  Typography,
  Button,
  Modal,
  Form,
  Input,
  Switch,
  Table,
} from 'antd';
import { Link } from 'umi';
import { connect } from 'dva';
import styles from './index.css';

class DataCollection extends React.Component {
  state = {
    speedDatas: [],
    positionDatas: [],
  };
  componentDidMount() {
    // console.log(this.props);
    const { dispatch } = this.props;
    dispatch({
      type: 'dataCollection/fetchOne',
      payload: this.props.match.params,
    });
    dispatch({
      type: 'dataCollection/reqGetStatusDataRead',
      payload: this.props.match.params,
    });
    dispatch({
      type: 'dataCollection/reqGetRealSpeed',
      payload: this.props.match.params,
    });
    dispatch({
      type: 'dataCollection/reqGetLatestPosition',
      payload: this.props.match.params,
    });
    this.setState({
      speedDatas: [
        ...this.state.speedDatas,
        this.props.dataCollection.speedData,
      ],
    });
    this.setState({
      positionDatas: [
        ...this.state.speedDatas,
        this.props.dataCollection.postionData,
      ],
    });
    const mydatas = setInterval(() => {
      dispatch({
        type: 'dataCollection/reqGetRealSpeed',
        payload: this.props.match.params,
      });
      dispatch({
        type: 'dataCollection/reqGetLatestPosition',
        payload: this.props.match.params,
      });
      if (this.state.count > 4 || this.state.checkState === false) {
        console.log(this.state.checkState);
        clearInterval(mydatas);
      }
      this.setState({
        vehicleInfo:
          this.props.dataCollection.vehicleInfo[0].licensePlateNumber,
      });
    }, 3000);
    const myData = setInterval(() => {
      console.log('adaa');
      this.setState({
        speedDatas: [
          ...this.state.speedDatas,
          this.props.dataCollection.speedData,
        ],
      });
      this.setState({
        positionDatas: [
          ...this.state.positionDatas,
          this.props.dataCollection.postionData,
        ],
      });
      this.setState({ count: this.state.count + 1 });
      console.log('21312312');
      console.log(this.state.positionDatas);
      console.log('21312312');
      if (this.state.count > 4 || this.state.checkState === false) {
        console.log(this.state.checkState);
        clearInterval(myData);
      }
    }, 3500);
  }
  onChange(checked) {
    console.log(`switch to ${checked}`);
    console.log(this.props);
    if (this.props.match.params) {
      const id = this.props.match.params.vehicleId;
      const paramsss = { vehicleIdList: [id] };
      if (checked === true) {
        // this.props.dispatch({
        //   type: 'dataCollection/reqOpenOrRealDataRead',
        //   payload: paramsss,
        // });
      } else {
        this.setState({ checkState: false });
      }
    }
  }
  changeTime(value) {
    return moment(value).format('YYYY-MM-DD h:mm:ss');
  }
  render() {
    // const licensePlateNumber = this.props.dataCollection.vehicleInfo[0].licensePlateNumber
    // console.log(this.props);
    console.log(this.props.dataCollection);
    const columns1 = [
      {
        title: '位置ID',
        dataIndex: 'positionId',
        key: 'positionId',
      },
      {
        title: '车辆ID',
        dataIndex: 'vehicleId',
        key: 'vehicleId',
      },
      {
        title: '经度',
        dataIndex: 'longitude',
        key: 'longitude',
      },
      {
        title: '纬度',
        dataIndex: 'latitude',
        key: 'latitude',
      },
      {
        title: '创建时间',
        dataIndex: 'createTime',
        key: 'createTime',
      },
    ];
    const columns2 = [
      {
        title: '发动机转速',
        dataIndex: 'engineSpeed',
        key: 'engineSpeed',
      },
      {
        title: '燃油量',
        dataIndex: 'fuelMargin',
        key: 'fuelMargin',
      },
      {
        title: '发动机温度',
        dataIndex: 'engineTemperature',
        key: 'engineTemperature',
      },
      {
        title: '速度',
        dataIndex: 'speed',
        key: 'speed',
      },
      {
        title: '倾斜度',
        dataIndex: 'inclination',
        key: 'inclination',
      },
    ];
    const dataSource2 = [...(this.state.speedDatas || [])];
    const dataSource1 = [...(this.state.positionDatas || [])];
    return (
      <PageContainer
        header={{
          title: '车牌号',
          breadcrumb: {
            routes: [
              {
                path: '/vehicle',
                breadcrumbName: '车辆信息',
              },
              {
                path: '/vehicle/:vehicleId',
                breadcrumbName: '详细信息',
              },
            ],
          },
        }}
      >
        <div className={styles.cars}>车牌号：{this.state.vehicleInfo}</div>
        <div className={styles.buttonStyle}>
          查看车辆历史位置及油耗信息：
          <Button type="primary">
            <Link to={'/vehicle/' + this.state.vehicleId + '/forCars'}>
              前往
            </Link>
          </Button>
        </div>
        开启或者关闭实时数据
        <Switch
          className={styles.switch}
          defaultChecked
          onChange={this.onChange.bind(this)}
        />
        <Table dataSource={dataSource1} columns={columns1} />;
        <Table dataSource={dataSource2} columns={columns2} />;
      </PageContainer>
    );
  }
}

export default connect(({ dataCollection }) => ({ dataCollection }))(
  DataCollection,
);
